<template>
	<view class="content">
		<!--我的租期-->
		<view class="content_1">
			<view>
				<view class="title_view">
					<view class="title" :class="[check_title==1?'title_check':'']" @click="checkTitle(1)">未缴账单</view>
					<view class="title" :class="[check_title==2?'title_check':'']" @click="checkTitle(2)">已交账单</view>
				</view>
				<block v-for="(data, index) in orderList" :key='index' v-if="
					(check_title==1&&data.status == 1)||
					(check_title==2&&data.status != 1)
				">
					<view class="house_view">
						<view class="view_left">
							
							<view class="view_cloumn">
								<image class="houseimg" @click.stop="checkOrderBill(0)" :src="data.cover_image" mode="aspectFit"></image>
								<view class="view_time">
									<view class="timetext">签约时间：{{data.pay_time}}</view>
									<view class="timetext">到期时间：{{data.rent_time}}</view>
								</view>
							</view>
							<view class="housedetail">
								<view class="housetitle">商品名称：{{data.goods_name}}</view>
								<view class="housetitle">商品分类：{{data.cate_name}}</view>
								<view class="housetitle">押金：¥ {{data.rent_money}}</view>
								<view class="housetitle">租金：¥ {{data.months_money}}</view>
								<view class="housetitle">扣租方式：每{{data.way_show}}一次</view>
								<view class="housetitle">缴费日期：{{data.way_show}}后</view>
							</view>
						</view>
						<view class="view_right_cancel" @click.stop="toPay(data.id)" v-if="data.status == 1">
							支付
						</view>
						<view class="view_right_choose" @click.stop="chooseOrder(data.order_id, index)" v-else-if="(data.order_status==2||data.order_status==5)&&data.status==2">
							退租
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {Request} from '../../utils/request.js';			//	导入接口请求文件
	//定义getApp对象
	const app = getApp();
	let seach_number = 3
	let page = 3
	export default {
		data() {
			return {
				orderList: [],
				//订单id
				orderId: [],
				//订单选择状态
				chooseState: '0',
				//传递给后台的order_id字符串
				order_id: '',
				check_title: 1,
			}
		},
		methods: {
			checkTitle: function(index) {
				this.check_title = index
			},
			// 预览图片
			checkOrderBill: function(index) {
				let arr = new Array();
				arr.push(this.orderList[index].cover_image);
				uni.previewImage({
					urls: arr,
				});
			},
			//选择订单
			chooseOrder:function (order_id, id) {
				uni.showModal({
				    title: '提示',
				    content: '是否确认退租',
				    success: function (res) {
				        if (res.confirm) {
				            new Request('/customer/goods/Apply_Rent_Goods/Apply').request(
				            	() => {
				            		return 'POST'
				            	},
				            	() => {
				            		return {
				            			openid: app.globalData.openid,
				            			userid: app.globalData.userid,
										orderid: order_id,
				            		}
				            	},
				            	(res) => {
									new Request().showToast(res.data.msg,'none', ()=>{
										setTimeout(()=>{
											uni.navigateBack({
											    delta: 1
											});
										},2000);
									});
									
								}
							);	
				        } else if (res.cancel) {
				            new Request().showToast('已取消');
				        }
				    }
				});
			},
			toPay: function(order_id) {
				uni.navigateTo({
				    url: '/pages/shop/detail/pay/tenancy?order_id=' + order_id
				});
				return;
				uni.redirectTo({
				    url: '/pages/shop/detail/pay/tenancy?order_id=' + order_id
				});
			},
		},

		onLoad() {
			//获取我的租用
			new Request('goods/Tenancy/getList').request(
				() => {
					return 'POST'
				},
				() => {
					return {
						openid: app.globalData.openid,
						userid: app.globalData.userid,
					}
				},
				(res) => {
					if (res.data.code == 0) {
						new Request().showToast('没有更多数据了');
						return;
					}
					this.orderList = res.data.data;

					// console.log(this.orderList);
				}
			);
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}
	
	/*
		我的租期样式
	*/
	.content_1 {
		margin-top: 40upx;
		padding: 0upx 40upx;
	}

	.title_view {
		display: flex;
	}

	.title {
		height: 40upx;
		font-size: 28upx;
		line-height: 40upx;
		color: #333333;
		margin: 0 auto;
	}
	
	.title_check {
		border-bottom:5upx solid #B3E9DC
	}

	.house_view {
		/* height: 270upx; */
		height: 350upx;
		background-color: #FFFFFF;
		margin-top: 30upx;
		border-radius: 10upx;
		display: flex;
	}

	.view_left {
		height: 180upx;
		width: 580upx;
		border-top-left-radius: 10upx;
		border-bottom-left-radius: 10upx;
		display: flex;
		align-items: center;
		padding-left: 20upx;
	}

	.view_right_cancel {
		/* height: 270upx; */
		height: 350upx;
		width: 80upx;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		background-color: #FFC26D;
		align-items: center;
		/* line-height: 270upx; */
		line-height: 350upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
	}
	
	.view_right_choose {
		height: 270upx;
		width: 80upx;
		border-top-right-radius: 10upx;
		border-bottom-right-radius: 10upx;
		background-color: #63D0D5;
		align-items: center;
		line-height: 270upx;
		text-align: center;
		font-size: 24upx;
		color: #FFFFFF;
	}

	.houseimg {
		height: 126upx;
		width: 230upx;
		background-color: #FFFFFF;
		margin-right: 20upx;
		/* margin-bottom: 15upx; */
	}

	.housedetail {
		height: 126upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.housetitle {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #333333;
		margin: 5upx 0;
	}

	.housetime {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #666666;
	}

	.housemoney {
		height: 38upx;
		line-height: 38upx;
		font-size: 28upx;
		color: #666666;
	}

	/*
		分割线样式
	*/
	.line {
		margin: 40upx 0upx;
		height: 30upx;
		background-color: #FFFFFF;
	}
	
	/*
		底部提交按钮
	*/
	.content_2{
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		z-index: 999;
		width: 750upx;
		height: 100upx;
		background-color: #49453A;
	}
	
	.submit{
		height: 100upx;
		width: 240upx;
		background-color: #63D0D5;
		position: absolute;
		right: 0upx;
		bottom: 0upx;
		font-size: 32upx;
		color: #FFFFFF;
		line-height: 100upx;
		text-align: center;
	}
	/* 签约时间 到期时间 */
	.view_cloumn{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 100upx;
		/* position: relative; */
		/* bottom: 10upx; */
	}
	.timetext{
		/* height: 38upx; */
		line-height: 38upx;
		font-size: 24upx;
		color: #333333;
		margin-bottom: 5upx;
	}
	.view_time{
		position: relative;
		/* bottom: 0upx; */
		top: 60upx;
	}
</style>
